<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab在ie的支持性</title>
	<script src="../js/jquery-1.10.1.min.js"></script>
	<style>
		.tabs-sm, .yi-tabs {
		    margin: 0 0 20px;
		    padding: 0;
		    *zoom: 1; }

		.tabs-sm .tabs-ul, .yi-tabs .tabs-ul {
		    margin: 0;
		    padding: 0;
		    list-style-type: none;
		    border-bottom: 2px solid #E5ECF1;
		    height: 31px;
		}

		.tabs-sm .tabs-ul > li, .yi-tabs .tabs-ul > li {
		    float: left;
		    margin-left: -1px;
		}

		.tabs-sm .tabs-ul > li > a, .yi-tabs .tabs-ul > li > a {
		    display: block;
		    padding: 2px 20px;
		    color: #5E6E87;
		    font-size: 14px;
		}

		.tabs-sm .tabs-ul > li > a:hover, .yi-tabs .tabs-ul > li > a:hover {
		    text-decoration: none;
		}

		.tabs-sm .tabs-ul > li.active a, .yi-tabs .tabs-ul > li.active a {
		    margin-bottom: -2px;
		    border-bottom: 2px solid #2E85FF;
		    color: #2E85FF;
		    zoom: 1; }

		.tabs-sm .tabs-ul > li .tab-message, .yi-tabs .tabs-ul > li .tab-message {
		    display: inline-block;
		    *display: inline;
		    *zoom: 1; padding: 0 1px;
		    border: 1px solid #e61739;
		    min-width: 12px;
		    color: #e61739;
		    font-size: 12px;
		    line-height: 12px;
		    text-align: center;
		    font-family: simSum;
		    border-radius: 2px;
		    position: relative;
		    top: -1px;
		    left: 3px;
		}

		.yi-tabs {
		    overflow: hidden;
		    height: 33px;
		}

		.yi-tabs .tabs-ul > li {
		    position: relative;
		}

		.yi-tabs .tabs-ul > li > a {
		    padding: 4px 20px;
		}

		.yi-tabs .tabs-ul > li.active a {
		    padding: 5px 20px;
		}

		.jsInfo-tabs-cont{
			border:1px solid #333;
			padding: 20px;
		}
		.hide{
			display: none;
		}
	</style>
</head>
<body>
	<div class="yi-tabs">
    <ul class="tabs-ul" id="tabsBox">
      <li class="active"><a href="javascript:;">tab1</a></li>
      <li><a href="javascript:;">tab2</a></li>
    </ul>
  </div>
  <div class="jsInfo-tabs-cont">
  	<h3>tab1内容区域</h3>
  	<h3>tab1内容区域</h3>
  	<h3>tab1内容区域</h3>
  	<h3>tab1内容区域</h3>
  </div>
  <div class="jsInfo-tabs-cont hide">
  	<h3>tab2内容区域</h3>
  	<h3>tab2内容区域</h3>
  	<h3>tab2内容区域</h3>
  	<h3>tab2内容区域</h3>
  	<h3>tab2内容区域</h3>
  	<h3>tab2内容区域</h3>
  </div>
  <script>
  	$('.tabs-ul li').click(function(){
			let index = $(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			$('body .jsInfo-tabs-cont').eq(index).removeClass('hide').siblings('.jsInfo-tabs-cont').addClass('hide');
		})
  </script>
</body>
</html>